<!-- 通用形配置 -->
<template>
  <div>
    <el-form-item label="在线文档">
      <a href="http://datav.jiaminghi.com/"
         target="_blank">点击查看</a>
    </el-form-item>
    <el-form-item label="模块名称">
      <avue-input v-model="main.activeOption.is"
                  @click="openSelect"></avue-input>
    </el-form-item>
    <el-form-item label="配置列表">
      <el-button size="mini"
                 type="primary"
                 @click="openCode">编辑</el-button>
    </el-form-item>
    <codeedit @submit="codeClose"
              v-model="code.obj"
              v-if="code.box"
              :type="code.type"
              :visible.sync="code.box"></codeedit>
    <datav-select
          @select="closeSelect"
          :selectValue="select.value"
          v-if="select.show"
          :visible.sync="select.show"
    ></datav-select>
  </div>
</template>

<script>
import codeedit from '../../page/group/code';
import DatavSelect from "@/option/components/datav-select";

export default {
  inject: ["main"],
  data () {
    return {
      code: {
        type: 'echartFormatter',
        box: false,
        obj: {},
      },
      select:{
        show: false,
        options:{},
        value: ''
      }
    }
  },
  components: {
    DatavSelect,
    codeedit,
  },
  methods: {
    codeClose (value) {
      this.main.activeObj[this.code.type] = value;
    },
    openCode () {
      this.code.obj = this.main.activeObj[this.code.type];
      console.log('当前datav组件的属性：',this.code.obj)
      this.code.box = true;
    },
    openSelect(){
      this.select.show = true
      this.select.value = this.main.activeOption.is
    },
    closeSelect( item ){
      this.main.activeOption.is = item.value
      if(item.config){
        this.code.obj = this.buildFun(item.config)
        this.main.activeObj[this.code.type] = this.code.obj ;
      }else{
        this.code.obj = this.buildFun({})
        this.main.activeObj[this.code.type] = this.code.obj ;
      }
    },
    buildFun(config){
      return '(data)=>{\n' +
          ' console.log(data);\n  ' +
          'return ' +
          JSON.stringify(config,null, '\t') + '\n' +
          ' }'
    }
  }
}
</script>

<style>
.input-icon{
  width: 60%;
}
</style>